<template>
  <div id="paging">
    <el-pagination
        :pager-count="11"
        :page-sizes="[10, 20, 30, 40, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalNum"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        @submit.native.prevent
    />
  </div>
</template>

<script>
export default {
  name: "GeneralPage",
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalNum: 0,
    }
  },
  methods: {
    // 一页的数量发生变化
    sizeChange(size) {
      this.pageSize = size
      this.$emit('changeEvent',this.getPage())
    },
    // 当前页数发生变化
    currentChange(page,fla=true) {
      this.currentPage = page
      // 选择是否派发事件给父组件
      if (fla) this.$emit('changeEvent',this.getPage())
    },
    // 获取分页数据
    getPage() {
      let param = {}
      param.page = this.currentPage
      param.page_size = this.pageSize
      return param
    },
    // 设置分页数据
    setPage(page,size) {
      if (page !== undefined) this.currentPage = page
      if (size !== undefined) this.pageSize = size
    },
    // 设置totalNum
    setTotalNum(newTotalNum) {
      this.totalNum = newTotalNum
    }
  }
}
</script>

<style scoped>
#paging {
  display: flex;
  justify-content: center;
}
</style>
